<template>
  <div class="container_chat">
    <div class="container_chat__header">
      <div class="container_chat__header__left iconfont" @click="toBack">
        &#xe84f;
      </div>
      <div class="container_chat__header__mid">{{ route.params.name }}</div>
      <div class="container_chat__header__right">更多</div>
    </div>
    <div class="container_chat__content">
      <ul class="container_chat__content__ul">
        <li
          :class="{
            container_chat__content__ul__items: true,
            reverse: item.from === userInfo.username,
          }"
          v-for="(item, index) of chatMessages"
          :key="index"
        >
          <div class="container_chat__content__ul__items__left">
            {{ item.from }}
          </div>
          <div
            :class="{
              container_chat__content__ul__items__right: true,
              isMe: item.from === userInfo.username,
            }"
          >
            {{ item.content }}
          </div>
        </li>
      </ul>
    </div>
    <div></div>
    <div class="container_chat__bottom">
      <input
        type="text"
        class="container_chat__bottom__input"
        placeholder="请在此键入消息"
        v-model="messageValue"
        @keydown.enter="toSendMessage"
      />
      <button class="container_chat__bottom__btn" @click="toSendMessage">
        发送
      </button>
    </div>
  </div>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <Toast v-if="isShow" :message="toastMessage" />
  </transition>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import api from "../../api/index";
import storage from "../../utils/storage";
import { useBackRouterEffect } from "../effects/backEffect.js";
import Toast, { showToastEffect } from "../../components/Toast.vue";

const socket = io("ws://localhost:3000");
// const socket = io("wss://medical.yydy.love");

const { showToast, isShow, toastMessage } = showToastEffect();

const toBack = useBackRouterEffect();
const route = useRoute();
const messageValue = ref("");
const userInfo = storage.getItem("userInfo");
// 聊天消息
const chatMessages = ref([]);
const chatData = reactive({
  to: route.params.name.toString(),
  from: userInfo.username,
  content: "",
  time: "",
});
const privateMsgArr = reactive([]);
function getChatMessage() {
  api.getChatMessageList(chatData).then((res) => {
    chatMessages.value = res;
  });
}

// 进入页面,先获取聊天消息
getChatMessage();

function toSendMessage() {
  if (messageValue.value) {
    chatData.time = Date.now();
    chatData.content = messageValue;
    privateMsgArr.push(chatData);
    api.commitChatMessage(chatData).then((res) => {});
    socket.emit("sendPrivateMsg", privateMsgArr);
    messageValue.value = "";
  } else {
    showToast("消息为空,请重新输入");
    return;
  }
}

// 数组去重
function deleteObj(obj) {
  const uniques = [];
  const stringify = {};
  for (let i = 0; i < obj.length; i++) {
    const keys = Object.keys(obj[i]);
    keys.sort(function (a, b) {
      return Number(a) - Number(b);
    });
    let str = "";
    for (let j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j]);
      str += JSON.stringify(obj[i][keys[j]]);
    }
    if (!stringify.hasOwnProperty(str)) {
      uniques.push(obj[i]);
      stringify[str] = true;
    }
  }
  return uniques;
}

socket.on("getPrivateMsg", (data) => {
  chatMessages.value.push(...data);
  chatMessages.value = deleteObj(chatMessages.value);
});
</script>

<style lang="scss" scoped>
.container_chat {
  width: 414rem;
  height: 896rem;
  font-size: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &__header {
    height: 88rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 44rem 20rem 20rem;
    font-size: 20rem;
    background-color: #6481da;
    box-sizing: border-box;
    color: #fff;
  }
  &__content {
    width: 414rem;
    height: 896rem;
    padding: 88rem 20rem 50rem 20rem;
    margin-bottom: 40rem;
    box-sizing: border-box;
    overflow: scroll;
    position: relative;
    background-color: #f6f6f6;
    overflow-y: auto;
    &__ul {
      position: absolute;
      top: 12rem;
      & .reverse {
        display: flex;
        flex-direction: row-reverse;
      }
      &__items {
        width: 374rem;
        height: 50rem;
        display: flex;
        align-items: center;
        margin: 30rem 0;
        &__left {
          width: 50rem;
          height: 30rem;
          border: 2rem solid #959090;
          box-sizing: border-box;
          border-radius: 12rem;
          overflow: hidden;
          text-align: center;
          line-height: 30rem;
          font-size: 12rem;
          &__img {
            margin-right: 20rem;
            width: 50rem;
            height: 50rem;
          }
        }
        & .isMe {
          background-color: #a6baf5;
        }
        &__right {
          margin: 0 10rem;
          font-size: 15rem;
          padding: 9rem 5rem;
          border-radius: 6rem;
          background-color: #fff;
        }
      }
    }
  }
  &__bottom {
    width: 414rem;
    height: 70rem;
    background-color: #6482da;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    padding: 0 20rem;
    &__input {
      width: 250rem;
      height: 30rem;
      border-radius: 5rem;
      padding: 2rem 0 2rem 10rem;
      box-sizing: border-box;
    }
    &__btn {
      width: 70rem;
      height: 30rem;
      border-radius: 5rem;
      background-color: #ea7e26;
      color: #fff;
      font-size: 16rem;
      font-weight: bold;
    }
  }
}
</style>
